React에서 만든 별점 표시기

✒️ 2025-05-16 12:35 내용 수정

• React와 react-bootstrap-icons를 사용하여 별점을 표시하는 별점 표시기를 만들었다.
• <StarFill/>은 react-bootstrap-icons component로, boostrap-icons 사이트에서 여러 아이콘을 불러와서 사용할 수 있다.
  • Bootstrap#React bootstrap 참고.
• 전체 별 개수와 평점 별 개수를 사용하여 javascript의 Array.from() 메소드를 사용하여 특정 길이의 유사 배열을 만들어 배열을 포함한 태그를 반환한다.
  • 배열#Array 생성 참고.

import { StarFill } from "react-bootstrap-icons";

function starRating(rate) {

    const totalStar = 5; // 전체 별 개수
    const yellowStar = rate; // 평점 별 개수
    const grayStar = totalStar - yellowStar; // 빈 별 개수

    const yellowStars = Array.from({length:yellowStar}, (_, index) => (
        <StarFill key={index} style={{color: '#FFC100'}}></StarFill>
    ));
    const grayStars = Array.from({length:grayStar}, (_, index) => (
        <StarFill key={index} style={{color: '#bebdbd'}}></StarFill>
    ));

    return (
        <div>
            {yellowStars}
            {grayStars}
        </div>
    )
}

export default starRating;